<template>
  <a-modal
    v-model:visible="visible"
    title="编辑用户"
    @ok="handleOk"
    @cancel="() => emit('update:visible')"
    cancelText="取消"
    okText="确定"
  >
    <a-form
      ref="userFormRef"
      :model="formState"
      name="user-form"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 18 }"
      :rules="rules"
      autocomplete="off"
      @finish="onFinish"
    >
      <a-form-item
        label="用户名"
        name="name"
        :rules="[{ required: true, message: '请输入用户名' }]"
      >
        <a-input v-model:value="formState.name" />
      </a-form-item>
      <a-form-item label="昵称" name="nickName">
        <a-input v-model:value="formState.nickName" />
      </a-form-item>
      <a-form-item label="性别" name="sex" :rules="[{ required: true }]">
        <a-radio-group v-model:value="formState.sex" name="radioGroup">
          <a-radio value="男">男</a-radio>
          <a-radio value="女">女</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="关联角色" name="role" :rules="[{ required: true }]">
        <a-select
          v-model:value="formState.role"
          style="width: 160px"
          :options="userOptions"
        ></a-select>
      </a-form-item>
      <a-form-item label="电话号码" name="telephone">
        <a-input
          v-model:value="formState.telephone"
          style="width: 160px"
        ></a-input>
      </a-form-item>
      <a-form-item label="用户状态" name="status">
        <a-switch
          v-model:checked="formState.status"
          checked-children="启用"
          un-checked-children="禁用"
        />
      </a-form-item>
      <a-form-item label="描述" name="message">
        <a-textarea
          v-model:value="formState.telephone"
          placeholder="请输入..."
          :rows="2"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup name="FormModal">
import { IUser } from "@/type/System";
import { FormInstance, SelectProps } from "ant-design-vue";
import { ref, watch } from "vue";
import cloneDeep from "lodash/cloneDeep";
import { ROLES } from "@/constants/role";
import { Rule } from "ant-design-vue/lib/form";

let emit = defineEmits(["update:visible"]);
let props = defineProps<{
  visible: Boolean;
  userData: IUser | null;
}>();
const formState = ref<IUser>({
  id: -1,
  name: "",
  nickName: "",
  sex: "男",
  role: "",
  telephone: "",
  status: false,
  message: "",
  creatTime: "",
});
const userFormRef = ref<FormInstance>();
const userOptions = ref<SelectProps["options"]>([]);
userOptions.value = Object.keys(ROLES).map((key) => {
  return {
    value: key,
    label: ROLES[key as keyof typeof ROLES].text,
  };
});

let validateNick = async (_rule: Rule, value: string) => {
  if (value.length < 3 || value.length > 5) {
    return Promise.reject("昵称长度为 3~5 个字符");
  } else {
    return Promise.resolve();
  }
};
const rules: Record<string, Rule[]> = {
  nickName: [{ required: true, validator: validateNick, trigger: "blur" }],
};
watch(
  () => props.userData,
  (newVal) => {
    if (newVal) {
      formState.value = cloneDeep(newVal);
    }
  }
);

const onFinish = () => {};
const handleOk = () => {
  userFormRef.value!.validate().then(() => {
    emit("update:visible");
  });
};
</script>
<style lang="less" rel="stylesheet/less" scoped></style>
